{% extends 'IcsocUIBundle::page.html.twig' %}
{% block content %}
<div class="widget-body">
    <div class="widget-main">
        <div id="my-wizard" data-target="#step-container">
            <ul class="wizard-steps">
                <li data-target="#step1" class="active">
                    <span class="step">1</span>
                    <span class="title">{{ 'Start'|trans }}</span>
                </li>

                <li data-target="#step2">
                    <span class="step">2</span>
                    <span class="title">{{ 'Set skill group'|trans }}</span>
                </li>

                <li data-target="#step3">
                    <span class="step">3</span>
                    <span class="title">{{ 'Set IVR'|trans }}</span>
                </li>

                <li data-target="#step4">
                    <span class="step">4</span>
                    <span class="title">{{ 'Set schedule planning'|trans }}</span>
                </li>

                <li data-target="#step5">
                    <span class="step">5</span>
                    <span class="title">{{ 'Finish'|trans }}</span>
                </li>
            </ul>
        </div>

        <hr />
        <div class="step-content pos-rel" id="step-container">
            <div class="step-pane active" id="step1">
                <div class="col-xs-1"></div>
                <div class="col-xs-8">
                    <h3 class="lighter block green">{{ 'Data preparation'|trans }}</h3>
                    <div>
                        <label for="" class="col-sm-8 control-label">
                            1.{{ 'Increase the system can log in staff, creating employee number, password and other information.'|trans }}
                        </label>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-sm btn-primary" onclick="showTab('{{ 'Seat management'|trans }}','{{ path('icsoc_agent_add') }}')">
                                <i class="ace-icon fa fa-plus"></i>
                                {{ 'Click to add agent'|trans }}
                            </button>
                        </div>
                    </div><br /><br />
                    <div>
                        <label for="" class="col-sm-8 control-label">
                            2.{{ 'Increase staff use of the telephone number, the extension number or mobile phone number.'|trans }}
                        </label>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-sm btn-primary" onclick="showTab('{{ 'Extension management'|trans }}','{{ path('icsoc_phone_manage_add') }}')">
                                <i class="ace-icon fa fa-plus"></i>
                                {{ 'Click to add seats extensions'|trans }}
                            </button>
                        </div>
                    </div><br /><br />
                    <div>
                        <label for="" class="col-sm-8 control-label">
                            3.{{ 'Increase the voice can be used in the system to play the files, the limit of conventional audio files, such as MP3 etc..'|trans }}
                        </label>
                        <div class="col-sm-4">
                           <button type="button" class="btn btn-sm btn-primary" onclick="showTab('{{ 'Voice management'|trans }}','{{ path('icsoc_sound_add') }}')">
                                <i class="ace-icon fa fa-plus"></i>
                                {{ 'Add audio files'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="step-pane" id="step2">
                <div class="col-xs-1"></div>
                <div class="col-xs-8">
                    <h3 class="lighter block green">{{ 'Set skill group'|trans }}</h3>
                    <div>
                        <label for="" class="col-sm-8 control-label">
                            {{ 'Set the rules to answer the phone when agents, and distribution in the current group telephone table. Such as: the mode of distribution, the ringing duration etc..'|trans }}
                        </label>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-sm btn-primary" onclick="showTab('{{ 'Skill group management'|trans }}','{{ path('icsoc_queue_index') }}')">
                                <i class="ace-icon fa fa-plus"></i>
                                {{ 'The skill set click Settings'|trans }}
                            </button>
                        </div>
                    </div><br /><br />
                </div>
            </div>

            <div class="step-pane" id="step3">
                <div class="col-xs-1"></div>
                <div class="col-xs-8">
                    <h3 class="lighter block green">{{ 'Set IVR'|trans }}</h3>
                    <div>
                        <label for="" class="col-sm-8 control-label">
                            {{ 'Set up the customer to call when the rules and the choice to use IVR process. Such as: Call - > welcome speech - > skill group - > hook'|trans }}
                        </label>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-sm btn-primary" onclick="showTab('{{ 'IVR process management'|trans }}','{{ path('icsoc_ivr_list') }}')">
                                <i class="ace-icon fa fa-plus"></i>
                                {{ 'Click to set the call process rules'|trans }}
                            </button>
                        </div>
                    </div><br /><br />
                </div>
            </div>

            <div class="step-pane" id="step4">
                <div class="col-xs-1"></div>
                <div class="col-xs-8">
                    <h3 class="lighter block green">{{ 'Set schedule planning'|trans }}</h3>
                    <div>
                        <label for="" class="col-sm-8 control-label">
                            {{ 'Set up the customer to call when the rules, and the selection of the use of IVR process. Such as: schedule to work time: Monday to Friday\'s "9:00~18:00"; agenda of work time: Monday to Friday\'s "18:00~09:00"'|trans }}
                        </label>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-sm btn-primary" onclick="showTab('{{ 'Schedule rule'|trans }}','{{ path('icsoc_rules_list') }}')">
                                <i class="ace-icon fa fa-plus"></i>
                                {{ 'Click to set the call schedule'|trans }}
                            </button>
                        </div>
                    </div><br /><br />
                </div>
            </div>

            <div class="step-pane" id="step5">
                <div class="center">
                    <h3 class="green">{{ 'The wizard has finished'|trans }}!</h3>
                </div>
            </div>
        </div>

        <hr />
        <div class="wizard-actions">
             <button class="btn btn-prev">
                <i class="ace-icon fa fa-arrow-left"></i>
                  {{ 'Prev'|trans }}
             </button>

             <button class="btn btn-success btn-next" data-last={{ 'Finish'|trans }}>
                   {{ 'Next'|trans }}
                   <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
             </button>
        </div>
    </div>
 </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@wizard_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        jQuery(function($){
            var $validation = false;
            $('#my-wizard')
                    .ace_wizard({
                        //step: 2 //optional argument. wizard will jump to step "2" at first
                    })
                    .on('change' , function(e, info) {
                        if(info.step == 1 && $validation) {
                            if(!$('#validation-form').valid()) return false;
                        }
                    })
                    .on('finished', function(e) {
                        bootbox.dialog({
                            message: "{{ 'The wizard has finished'|trans }}!",
                            buttons: {
                                "success" : {
                                    "label" : "{{ 'Sure'|trans }}",
                                    "className" : "btn-sm btn-primary"
                                }
                            }
                        });
                    }).on('stepclick', function(e) {
                        //e.preventDefault();//this will prevent clicking and selecting steps
                    });

            //jump to a step
            $('#step-jump').on('click', function() {
                var wizard = $('#fuelux-wizard').data('wizard')
                wizard.currentStep = 4;
                wizard.setState();
            })
        });

        function showTab(name,url)
        {
            window.parent.showTab(name,url);
        }

    </script>
{% endblock %}